<template>
  <div>
    <hyl-table :tableData="tableData" :columns="columns" :specialColumns="specialColumns" v-on:tableSelection="tableSelection">
      <template slot="buttons">
        <el-button type="text" icon="el-icon-edit" @click="handleClick({},'edit')">编辑</el-button>
        <el-button type="text" icon="el-icon-circle-plus-outline" @click="handleClick({},'add')">添加</el-button>
        <el-button type="text" icon="el-icon-delete" @click="handleClick({},'delete')">删除</el-button>
      </template>
    </hyl-table>
    <hyl-pagination :total="total" v-on:fetch="fetch" :page-sizes="[5,10,15]"/>
  </div>
</template>

<script>
import hylTable from '@/components/table'
import hylPagination from '@/components/pagination'
import {fetch} from '@/utils/http'
export default {
  name: 'index',
  components: {
    hylTable,
    hylPagination
  },
  data () {
    return {
      tableData: [],
      total: 0,
      page: 1,
      limit: 5,
      specialColumns: [{
        type: 'selection',
        width: '55'
      }, {
        type: 'index',
        indexMethod: this.indexMethod
      }],
      columns: [],
      addColumns: [],
      editColumns: [],
      deleteColumns: [],
      multipleSelection: [],
      editDialogVisible: false,
      addDialogVisible: false,
      applicationName: '',
      controller: '',
      addColumnsRule: {},
      editColumnsRule: {},
      addRef: 'addForm',
      editRef: 'editForm'
    }
  },
  mounted: function () {
    this.getColumns()
    this.fetch()
  },
  methods: {
    handleClick (row = {}, type = '') {
      switch (type) {
        case 'add':
          alert('add')
          break
        case 'delete':
          alert('删除')
          break
        case 'edit':
          alert('edit')
          break
        default:
          alert('其它操作')
      }
    },
    indexMethod (index) {
      return index + 1 + (this.page - 1) * this.limit
    },
    fetch (page = {
      page: 1,
      limit: 5
    }) {
      fetch(this.applicationName + '/' + this.controller + '/page', page).then((res) => {
        this.tableData = res.data.rows
        this.total = res.data.total
        this.page = page.page
        this.limit = page.limit
      })
    },
    getColumns () {
      var temp = [{'tableCatalog': 'def', 'tableSchema': 'rbac', 'tableName': 'sys_menu', 'columnName': 'id', 'ordinalPosition': 1, 'columnDefault': null, 'isNullable': 'NO', 'dataType': 'varchar', 'characterMaximumLength': 36, 'characterOctetLength': 108, 'numericPrecision': null, 'numericScale': null, 'datetimePrecision': null, 'characterSetName': 'utf8', 'collationName': 'utf8_bin', 'columnType': 'varchar(36)', 'columnKey': 'PRI', 'extra': '', 'privileges': 'select,insert,update,references', 'columnComment': '', 'generationExpression': ''}, {'tableCatalog': 'def', 'tableSchema': 'rbac', 'tableName': 'sys_menu', 'columnName': 'name', 'ordinalPosition': 2, 'columnDefault': null, 'isNullable': 'NO', 'dataType': 'varchar', 'characterMaximumLength': 45, 'characterOctetLength': 135, 'numericPrecision': null, 'numericScale': null, 'datetimePrecision': null, 'characterSetName': 'utf8', 'collationName': 'utf8_bin', 'columnType': 'varchar(45)', 'columnKey': 'UNI', 'extra': '', 'privileges': 'select,insert,update,references', 'columnComment': '', 'generationExpression': ''}, {'tableCatalog': 'def', 'tableSchema': 'rbac', 'tableName': 'sys_menu', 'columnName': 'url', 'ordinalPosition': 3, 'columnDefault': null, 'isNullable': 'YES', 'dataType': 'varchar', 'characterMaximumLength': 36, 'characterOctetLength': 108, 'numericPrecision': null, 'numericScale': null, 'datetimePrecision': null, 'characterSetName': 'utf8', 'collationName': 'utf8_bin', 'columnType': 'varchar(36)', 'columnKey': '', 'extra': '', 'privileges': 'select,insert,update,references', 'columnComment': '', 'generationExpression': ''}, {'tableCatalog': 'def', 'tableSchema': 'rbac', 'tableName': 'sys_menu', 'columnName': 'type', 'ordinalPosition': 4, 'columnDefault': null, 'isNullable': 'NO', 'dataType': 'tinyint', 'characterMaximumLength': null, 'characterOctetLength': null, 'numericPrecision': 3, 'numericScale': 0, 'datetimePrecision': null, 'characterSetName': null, 'collationName': null, 'columnType': 'tinyint(4)', 'columnKey': '', 'extra': '', 'privileges': 'select,insert,update,references', 'columnComment': '0\u662F\u83DC\u5355,1\u662F\u6743\u9650', 'generationExpression': ''}, {'tableCatalog': 'def', 'tableSchema': 'rbac', 'tableName': 'sys_menu', 'columnName': 'level', 'ordinalPosition': 5, 'columnDefault': null, 'isNullable': 'YES', 'dataType': 'tinyint', 'characterMaximumLength': null, 'characterOctetLength': null, 'numericPrecision': 3, 'numericScale': 0, 'datetimePrecision': null, 'characterSetName': null, 'collationName': null, 'columnType': 'tinyint(4)', 'columnKey': '', 'extra': '', 'privileges': 'select,insert,update,references', 'columnComment': '\u5C42\u7EA7', 'generationExpression': ''}, {'tableCatalog': 'def', 'tableSchema': 'rbac', 'tableName': 'sys_menu', 'columnName': 'seq', 'ordinalPosition': 6, 'columnDefault': null, 'isNullable': 'YES', 'dataType': 'tinyint', 'characterMaximumLength': null, 'characterOctetLength': null, 'numericPrecision': 3, 'numericScale': 0, 'datetimePrecision': null, 'characterSetName': null, 'collationName': null, 'columnType': 'tinyint(4)', 'columnKey': '', 'extra': '', 'privileges': 'select,insert,update,references', 'columnComment': '\u6392\u5E8F', 'generationExpression': ''}, {'tableCatalog': 'def', 'tableSchema': 'rbac', 'tableName': 'sys_menu', 'columnName': 'pid', 'ordinalPosition': 7, 'columnDefault': null, 'isNullable': 'YES', 'dataType': 'varchar', 'characterMaximumLength': 36, 'characterOctetLength': 108, 'numericPrecision': null, 'numericScale': null, 'datetimePrecision': null, 'characterSetName': 'utf8', 'collationName': 'utf8_bin', 'columnType': 'varchar(36)', 'columnKey': '', 'extra': '', 'privileges': 'select,insert,update,references', 'columnComment': '\u7236\u7EA7id', 'generationExpression': ''}]
      this.applicationName = 'long-base-upms'
      this.controller = 'sysMenu'
      temp.forEach(item => {
        var obj = {}
        obj.prop = item.columnName
        obj.label = item.columnName
        obj.type = item.dataType
        this.columns.push(obj)
      })
    }
  }
}
</script>

<style scoped>

</style>
